React 19 is supported on Web SDK!
 
Installing new dependencies
All of our hook libraries have been renamed, here are the new dependencies you need to get started with Web SDK:
npm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
# or
pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
# or
yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
 
Configuring your app
Main differences when it comes to configuration:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css"; 
import App from "./App";
import { SequenceConnect } from "@0xsequence/connect";
import { SequenceCheckoutProvider } from "@0xsequence/checkout"
import { config } from "./config";
function Dapp() {
  return (
    <SequenceConnect config={config}>
      <SequenceCheckoutProvider>
          <App />
      </SequenceCheckoutProvider>
    </SequenceConnect>
  );
}
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Dapp />
  </React.StrictMode>
);
 
@0xsequence/kit -> @0xsequence/connect for authentication 
@0xsequence/kit -> @0xsequence/wallet-widget for wallet UI 
@0xsequence/kit-checkout -> @0xsequence/checkout 
- no need to manually import the 
@0xsequence/design-system/styles.css when using @0xsequence/connect 
@0xsequence/connect is compatible with @0xsequence/design-system v2 
KitProvider is now SequenceConnectProvider 
KitCheckoutProvider is now SequenceCheckoutProvider 
KitWalletProvider is now SequenceWalletProvider 
Connecting your app
import './App.css'
import { useOpenConnectModal } from '@0xsequence/connect'
function App() {
  const {setOpenConnectModal} = useOpenConnectModal()
  
  return (
    <>
      <button onClick={() => setOpenConnectModal(true)}>Connect</button>
    </>
  )
}
export default App
 
Tailwind css
Web SDK uses Tailwind v4, if you are using Tailwind v3, you need to upgrade.